<template>
	<div style="padding-left: 0.1rem;padding-right: 0.1rem; height: 100%;">
		<!-- <div id="myChart" :style="{width: '300px', height: '300px'}"></div> -->

		<el-card class="box-card">
			<div slot="header">
				<el-row :gutter="5">
					<el-col :span="5">
						<h2 style="padding-top: 0.5rem;padding-bottom: 0.5rem;">门诊首页</h2>
					</el-col>
				</el-row>
			</div>
			<!-- 首页图片 -->
			<div>
				<el-row :gutter="20">
					<!-- 留白 -->
					<el-col :span="2">
						<div style="background-color: #FFFFFF;min-height: 36px;"></div>
					</el-col>
					<el-col :span="4">
						<el-row>
							<el-col :span="10">
								<div style="background-color: #FFFFFF;min-height: 36px;"><img
										src="../../../public/images/1.png" /></div>
							</el-col>
							<el-col :span="14">
								<el-row style="padding-top:0.5rem;">
									<h2 style="text-align: center;">86</h2>
								</el-row>
								<el-row style="padding-top:0.5rem"></el-row>
								<h5 style="text-align: center;">今日挂号总人数</h5>
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="4">
						<el-row>
							<el-col :span="10">
								<div style="background-color: #FFFFFF;min-height: 36px;"><img
										src="../../../public/images/2.png" />
								</div>
							</el-col>
							<el-col :span="14">
								<el-row style="padding-top:0.5rem;">
									<h2 style="text-align: center;">142</h2>
								</el-row>
								<el-row style="padding-top:0.5rem;"></el-row>
								<h5 style="text-align: center;">今日预约总人数</h5>
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="4">
						<el-row>
							<el-col :span="10">
								<div style="background-color: #FFFFFF;min-height: 36px;"><img
										src="../../../public/images/3.png" /></div>
							</el-col>
							<el-col :span="14">
								<el-row style="padding-top:0.5rem;">
									<h2 style="text-align: center;">1589</h2>
								</el-row>
								<el-row style="padding-top:0.5rem;"></el-row>
								<h5 style="text-align: center;">今日门诊总收益</h5>
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="4">
						<el-row>
							<el-col :span="10">
								<div style="background-color: #FFFFFF;min-height: 36px;"><img
										src="../../../public/images/4.png" /></div>
							</el-col>
							<el-col :span="14">
								<el-row style="padding-top:0.5rem;">
									<h2 style="text-align: center;">856</h2>
								</el-row>
								<el-row style="padding-top:0.5rem;"></el-row>
								<h5 style="text-align: center;">今日门诊充值数</h5>
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="4">
						<el-row>
							<el-col :span="10">
								<div style="background-color: #FFFFFF;min-height: 36px;"><img
										src="../../../public/images/5.png" /></div>
							</el-col>
							<el-col :span="14">
								<el-row style="padding-top:0.5rem;">
									<h2 style="text-align: center;">32</h2>
								</el-row>
								<el-row style="padding-top:0.5rem;"></el-row>
								<h5 style="text-align: center;">今日绑卡人数</h5>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</div>
			<div>
				<el-collapse v-model="activeNames" @change="handleChange">
					<el-collapse-item  title="图形数据" name="1">
						<el-row :gutter="15">
							<el-col :span="12">
								<div id="myChart" :style="{width: '500px', height: '300px'}"></div>
							</el-col>
							<el-col :span="12">
								<div id="rank2" :style="{width: '500px', height: '300px'}"></div>
							</el-col>
						</el-row>
						
					</el-collapse-item>
					<el-collapse-item title="表格数据" name="2">
						<el-row :gutter="10">
							<el-col :span="10" :offset="1">
								<el-card class="box-card">
									<div slot="header">
										<el-row :gutter="5">
											<el-col :span="15">
												<h3 style="padding-top: 0.3125rem;">挂号实时信息</h3>
											</el-col>
										</el-row>
									</div>
									<el-table :data="tableData" style="width: 100%">
										<el-table-column style="text-align: right;" type="index" width="">
										</el-table-column>
										<el-table-column prop="name" label="姓名" width="">
										</el-table-column>
										<el-table-column prop="name" label="科室" width="">
										</el-table-column>
										<el-table-column prop="name" label="挂号量" width="">
										</el-table-column>
									</el-table>
								</el-card>
							</el-col>
							<el-col :span="6">
								<el-card class="box-card">
									<div slot="header">
										<el-row :gutter="5">
											<el-col :span="15">
												<h3 style="padding-top: 0.3125rem;">今日热门医生</h3>
											</el-col>
										</el-row>
									</div>
									<el-table :data="rank1" style="width: 100%">
										<el-table-column type="index" align="center" width="15">
										</el-table-column>
										<el-table-column prop="name" align="center" label="姓名" width="">
										</el-table-column>
										<el-table-column prop="inroom" align="center" label="科室" width="">
										</el-table-column>
										<el-table-column prop="number" align="center" style="text-align: center;" label="挂号量" width="">
										</el-table-column>
									</el-table>
								</el-card>
							</el-col>
							<el-col :span="6">
								<el-card class="box-card">
									<div slot="header">
										<el-row :gutter="5">
											<el-col :span="15">
												<h3 style="padding-top: 0.3125rem;">本周热门医生</h3>
											</el-col>
										</el-row>
									</div>
									<el-table :data="rank2" style="width: 100%">
										<el-table-column type="index" align="center" width="15">
										</el-table-column>
										<el-table-column prop="name" align="center" label="姓名" width="">
										</el-table-column>
										<el-table-column prop="inroom" align="center" label="科室" width="">
										</el-table-column>
										<el-table-column prop="number" align="center" style="text-align: center;" label="挂号量" width="">
										</el-table-column>
									</el-table>
								</el-card>
							</el-col>
						</el-row>
					</el-collapse-item>
				</el-collapse>

			</div>
		</el-card>
	</div>

</template>

<script>
	export default {

		mounted: function() {
			this.drawLine1();
			this.drawLine2();
			this.$axios.get('http://localhost:8080/jsonFiles/HOME_rank1.json').then((result) => {
				console.log(result.data);
				this.rank1 = result.data
			}).catch((err) => {
				console.log(err);
			});
			this.$axios.get('http://localhost:8080/jsonFiles/HOME_rank2.json').then((result) => {
				console.log(result.data);
				this.rank2 = result.data
			}).catch((err) => {
				console.log(err);
			});
		},
		data() {
			return {
				activeNames: ['1', '2'],
				rank1: {
					name: '',
					inroom: '',
					number: ''
				},
				rank2: {
					name: '',
					inroom: '',
					number: ''
				},
				tableData: {}
			}
		},
		methods: {
			drawLine1() {
				let chartDom = document.getElementById('myChart');
				let myChart = this.$echarts.init(chartDom);
				let option;
				option = {
					title: {
						text: '近七日门诊收益'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['门诊收益']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						name: '门诊收益',
						type: 'line',
						stack: '总量',
						data: [1250, 932, 1501, 834, 1290, 530, 110]
					}, ]
				};
				myChart.setOption(option);
			},
			drawLine2(){
				let chartDom = document.getElementById('rank2');
				let myChart = this.$echarts.init(chartDom);
				let option;
				option = {
				    title: {
				        text: '本周科室挂号总量排行',
				    },
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'shadow'
				        }
				    },
				    legend: {
				        data: ['科室名称']
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis: {
				        type: 'value',
				        boundaryGap: [0, 0.01]
				    },
				    yAxis: {
				        type: 'category',
				        data: ['耳鼻咽喉科','牙科', '口腔科', '血液科', '内科', '骨科']
				    },
				    series: [
				        {
				            name: '科室名称',
				            type: 'bar',
				            data: [32, 44, 55, 66, 82, 85]
				        },
				    ]
				};
				myChart.setOption(option);
			}
		}


	}
</script>

<style scoped="scoped">
	.shadow {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 15px;

	}

	#chart_example {
		width: 50%;
		height: 500px;
		border: 1px solid red;
		margin: 0 auto;
	}
</style>
